<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="最爱古风小雷丘">
    <title></title>
    <link rel="stylesheet" type="" href="weipinhui.css">
</head>
<body>
    <!-- 导航栏  -->
    <nav class="nav">
        <div class="container">
            <div class="nav-left">
                <div class="nav-top">
                    <span class="nav-text"><a href="#">河南</a></span>
                    <span class="nav-tu1"><a href="#"></a></span>
                </div>
                <ul class="nav-bottom">
                    <div id="cover"></div>
                    <li class="nav-first">请选择所在地区</li>
                    <li><span>A</span><a href="#">安徽</a></li>
                    <li><span>A</span><a href="#">安徽</a></li>
                    <li><span>A</span><a href="#" class="an">安徽</a></li>
                    <li><span>A</span><a href="#">安徽</a></li>
                    <li><span>A</span><a href="#">安徽</a></li>
                    <li><span>A</span><a href="#">安徽</a></li>
                    <li><span>A</span><a href="#">安徽</a></li>
                    <li><span>A</span><a href="#">安徽</a></li>
                    <li><span>A</span><a href="#">安徽</a></li>
                    <li><span>A</span><a href="#">安徽</a></li>
                    <li><span>A</span><a href="#">安徽</a></li>
                    <li><span>A</span><a href="#">安徽</a></li>
                    <li><span>A</span><a href="#">安徽</a></li>
                    <li><span>A</span><a href="#">安徽</a></li>
                    <li><span>A</span><a href="#">安徽</a></li>              
                </ul> 
            </div>

            <ul class="nav-right">
                <li class="hover">
                    <a href="#">请登录</a>
                    <span class="add"></span>
                    <div class="right-first"> 
                             <div class="cover"></div>                          
                             <div class="first-middle">
                             <span class="tu4"></span>
                             <div class="regis"><a href="#">您好！[请登录]</a></div>
                             <div class="first-bottom">
                              <ul class="one">
                                  <li><a href="#">我的收藏</a></li>
                                  <li><a href="#">零钱</a></li>
                                  <li><a href="#">我的唯品币</a></li>
                              </ul>
                                <ul class="two">
                                  <li><a href="#">我的订单</a></li>
                                  <li><a href="#">我的优惠卷</a></li>
                                  <li><a href="#">唯品金融</a></li>
                              </ul>
                          </div>
                         </div>                    
                    </div>
                </li>
                <li><a href="#">注册</a></li><span class="add"></span> 
                <li class="hover2">
                    <i class="tu2"></i>
                    <span>签到有礼</span>
                    <div class="qiandao">
                        <span class="jiantou"></span>
                        <ul>
                            <li class="circle"></li>
                            <li>1天</li>
                        </ul>
                        <ul>
                            <li class="circle"></li>
                            <li>2天</li>
                        </ul>
                        <ul>
                            <li class="circle"></li>
                            <li>3天</li>
                        </ul>
                        <ul>
                            <li class="circle"></li>
                            <li>4天</li>
                        </ul>
                        <ul>
                            <li class="circle"></li>
                            <li>5天</li>
                        </ul>
                        <ul>
                            <li class="circle"></li>
                            <li>6天</li>
                        </ul>
                        <ul>
                            <li class="circle"></li>
                            <li>7天</li>
                        </ul>
                        <hr>
                        <ul class="hr">
                            <li><a href="#">每天签到送惊喜，连续签到更享心动奖励</a></li>
                            <li>签到</li>
                        </ul>
                    </div>
                </li><span class="add"></span> 
                <li><a href="#">我的订单</a></li><span class="add"></span> 
                <li class="hover3">
                    <a href="#">
                    <span>我的特卖</span>
                    <span class="a"></span>
                    <span class="add"></span> 
                    </a>
                    
                    <ul class="like">
                        <div class="cover"></div>
                       <li><a href="#">品牌收藏(0)</a></li>
                       <li><a href="#">商品收藏(0)</a></li>
                       <li><a href="#">我的足迹(0)</a></li>
                    </ul>
                </li>
                <li class="hover4">
                    <a href="#">会员俱乐部<span class="a"></span></a>
                    <span class="add"></span> 
                    <ul class="like">
                        <div class="cover"></div>
                       <li><a href="#">俱乐部首页</a></li>
                       <li><a href="#">唯品币兑换</a></li>
                       <li><a href="#">免费抽大奖</a></li>
                    </ul>
                </li>
                <li class="kefu">
                    <a href="#">客户服务<span class="a"></span></a>
                    <span class="add"></span> 
                    <ul class="like">
                        <div class="cover"></div>
                       <li><a href="#">联系客服</a></li>
                       <li><a href="#">帮助中心</a></li>
                       <li><a href="#">服务中心</a></li>
                       <li><a href="#">知识产权投诉</a></li>
                    </ul>
                </li>
                <li class="hover5"><a href="#">
                    <i class="tu3"></i>手机版</a>
                    <span class="add"></span> 
                    <ul class="like">
                        <div class="cover"></div>
                        <li><img src="img/001.jpg" alt=""></li>
                        <li><a href="#">随时逛&nbsp;及时抢</a></li>
                    </ul>
                </li>
                <li class="hover6">
                    
                    <a href="#">更多<span class="a"></span></a>
                    <ul class="like">
                        <div class="cover"></div>
                        <li>
                            <p>合作专区</p>
                            <span><a href="#">联名卡申请</a></span>
                            <span><a href="#">唯品卡</a></span>
                            <span><a href="#">支付专区</a></span>
                        </li>
                        <li>
                            <p>关于我们</p>
                            <span><a href="#">sell on vip</a></span>
                            <span><a href="#">品牌招商</a></span>
                            <span><a href="#">官方博客</a></span>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>

    <!-- logo  --> 
        <div class="container">
            <div class="logo">
               <div class="logo-left"><img src="img/logo.png" alt=""></div>
               <ul class="logo-right">
                   <li class="img1"><img src="img/01.png" alt=""></li>
                   <li class="img2"><img src="img/02.png" alt=""></li>
                   <li class="img3"><img src="img/03.png" alt=""></li>
                   <li class="img4">
                       <span class="suo"><div class="red">0</div></span>
                       <span>我的购物袋</span>
                       <div class="shop">
                           <div class="cover"></div>
                           <span>好像还未登录！</span>
                           <span><a href="#">马上登录</a></span>
                           <span>查看购物袋吧</span>
                       </div>
                    </li>
               </ul> 
            </div>             
        </div>
       
        <header>
            <div class="container">
               <div class="header">
                    <ul class="header-left">
                    <li class="cu color"><a href="#">首页</a></li>
                    <li class="cu"><a href="#">唯品国际</a></li>
                    <li class="cu"><a href="#">母婴</a></li>
                    <li class="cu"><a href="#">家居家电</a></li>                    
                    <li><a href="#">男士</a></li>
                    <li><a href="#">美妆</a></li>
                    <li>
                        <img src="img/new.png" alt="">
                        <a href="#">生活超市</a>
                    </li>
                    <li><a href="#">金融</a></li>
                    <li class="more2">
                        <a href="#">更多</a>
                        <span></span>
                        <ul class="photos">
                            <li class="tire-first">
                                <a href="#"><img src="img/1.jpg" alt=""></a>                              
                                    <div class="tire"></div>
                                    <div class="tire-second">女装</div>                              
                            </li>
                            <li class="tire-first">
                                <a href="#"><img src="img/002.jpg" alt=""></a>                             
                                    <div class="tire"></div>
                                    <div class="tire-second">女装</div>
                              
                            </li>
                            <li class="tire-first">
                                <a href="#"><img src="img/003.jpg" alt=""></a>                             
                                    <div class="tire"></div>
                                    <div class="tire-second">女装</div>
                              
                            </li>
                            <li class="tire-first">
                                <a href="#"><img src="img/004.jpg" alt=""></a>                               
                                    <div class="tire"></div>
                                    <div class="tire-second">女装</div>
                             
                            </li>
                            <li class="tire-first">
                                <a href="#"><img src="img/005.jpg" alt=""></a>
                                    <div class="tire"></div>
                                    <div class="tire-second">女装</div>
                             
                            </li>
                        </ul>
                    </li>                    
                </ul>
                <ul class="header-right">
                    <li>
                        <img src="img/search.png" alt="">
                        <span>分类</span>
                    </li>
                    <li>
                        <img src="img/rili.png" alt="">
                        <span>预告</span>
                    </li>
                </ul>
               </div>
            </div>
        </header>
        
        <main>
            <div class="container">                
                <div class="lunbo">
                    <ul class="imgs">
                        <li class="current"><a href="#"><img src="img/lunbo01.jpg" alt=""></a></li>
                        <li><a href="#"><img src="img/lunbo02.jpg" alt=""></a></li>
                        <li><a href="#"><img src="img/lunbo03.jpg" alt=""></a></li>
                        <li><a href="#"><img src="img/lunbo04.jpg" alt=""></a></li>
                    </ul>
                    <ul class="circle">
                        <li class="circle-first"><a href="#">时尚风暴 最高满199减40</a></li>
                        <li><a href="#">新人专项2重礼</a></li>
                        <li><a href="#">净水节 最高500元红包</a></li>
                        <li><a href="#">安莉芳集团 跨专场3件8折</a></li>
                    </ul>
                    <div id="click">
                        <span class="prev">&lt;</span>
                        <span class="next">&gt;</span>
                    </div>
                    <hr> 
                </div>
            </div>
        </main>

        <div class="container">
            <ul class="content">
                <li><a href="#"><img src="img/a.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/b.jpg" alt=""></a></li>
                <li><a href="#"><img src="img/c.jpg" alt=""></a></li>
            </ul>
        </div>
    
    <!--  侧边栏  -->
    <aside>
        <ul class="aside-top">
            <li class="tou">
                <div class="ceng">
                    <a href="#"></a>
                <p>帐号</p>
                </div>

                <div class="denglu">
                    <a href="#"></a>
                    <div class="picture"><a href="#"></a></div>
                    <div class="text">
                        <span>你好！请</span>
                        <span><a href="#">登录 </a>|<a href="#"> 注册</a></span>
                    </div>
                    <ul class="center">
                        <li class="one">
                            <a href="#" class="tu1"></a>
                            <p><a href="#">我的订单</a></p>
                        </li>
                        <li class="two">
                            <a href="#" class="tu2"></a>
                            <p><a href="#">我的消息</a></p>
                        </li>
                    </ul>
                    <p><a href="#">会员俱乐部</a></p>
                </div>

            </li>
            <li class="bag">
                <a href="#"></a>
            </li>

            <li class="money">
                <a href="#"></a>
                <div class="youhui"><a href="#">我的优惠卷</a></div>
            </li>
            <li class="xin">
                <a href="#"></a>
                <div class="youhui"><a href="#">品牌收藏</a></div>
            </li>
            <li class="star">
                <a href="#"></a>
                <div class="youhui"><a href="#">商品收藏</a></div>
            </li>
            <li class="shuaxin">
                <a href="#"></a>
                <div class="youhui"><a href="#">我的足迹</a></div>
            </li>
        </ul>

        <ul class="aside-bottom">
            <li class="bi">
                <a href="#"></a>
                <div class="youhui"><a href="#">会员反馈</a></div>
            </li>
           <li id="back">
                <a href="#"></a>
                <div class="youhui"><a href="#">会员反馈</a></div>
            </li>
        </ul>
    </aside>

    <div class="container"><img src="img/title_v2.jpg" alt=""></div> 
</body>
</html>
<script>
    
    // aside 侧边栏
    var  asideLis = document.querySelectorAll('aside .aside-top>li');
    var  tou = document.querySelector('.aside-top .tou');
    var  close = document.querySelector('.aside-top .tou .denglu>a');
    var denglu = document.querySelector('.aside-top .tou .denglu');

    tou.onmouseover = function(){
        denglu.style.left = '-275px';
    }
    tou.onmouseout = function(){
        denglu.style.left = '0';
    }
    close.onclick = function(){
        denglu.style.left = '0';
    }
    

    window.onload = function(){
        var prev = document.querySelector('.lunbo .prev');
        var next = document.querySelector('.lunbo .next');
        var imgs = document.querySelectorAll('.lunbo .imgs li');
        var circle = document.querySelectorAll('.lunbo .circle li');
        var lunbo = document.querySelector('.lunbo');
        var hr = document.querySelector('main hr');
    //  上一张
    function prevImg(){
        index = index == 0 ? imgs.length -1 : index - 1;
        changeImg();
    }
    // 下一张
    function nextImg(){
        index = index == imgs.length - 1 ? 0 : index + 1;
        changeImg();
    }
    
    var index = 0;

    // 自动切换图片
    function changeImg(){
        for(var i = 0;i < imgs.length;i++){
            imgs[i].className = '';
        }
            imgs[index].className = 'current';
            hr.style.left = circle[index].offsetLeft + 'px';
    }
    var timer = setInterval(nextImg,1000);

    // 跟随指示切换图片
    for(var i = 0;i < circle.length;i++){
        circle[i].index = i;
        circle[i].onmouseover = function(){
        clearInterval(timer);
        timer = null;
        index = this.index;
        changeImg(index);
      }
       circle[i].onmouseout = function(){
        if(timer == null){
            timer = setInterval(nextImg,1000);
        }
      }
    }

    // 鼠标放到图片上
    lunbo.onmouseover = function(){
         clearInterval(timer);
         timer = null;
         prev.style.display = 'block';
         next.style.display = 'block';
    } 
    lunbo.onmouseout = function(){
         if(timer == null){
            timer = setInterval(nextImg,1000);
        }
        prev.style.display = 'none';
        next.style.display = 'none';
    }

    // 点击左右按钮 图片切换
    prev.onclick = function(){
        prevImg();
    }
    next.onclick = function(){
        nextImg();
    }
}

     //   返回顶部   
     var back = document.querySelector('aside .aside-bottom.jiantou');
     back.onclick = function(){
         document.body.scrollTop =  document.documentElement.scrollTop = 0;
     }

     window.onscroll  = function(){
         var scroll = document.body.scrollTop || document.documentElement.scrollTop;
         console.log(scroll);
         var header = document.querySelector('header');
         if(scroll > 150){
             header.style.position = 'fixed';
             header.style.top = '0';
             header.style.marginTop = '0';
         }else{
             header.style.cssText = '';
         }
     }


  
</script>